<template>
  <div class="step-line ">

    <template v-for="(item, index) in stepList">
      <div :class="['icon', active - 1 == index ? 'current' : active - 1 > index ? 'success' : 'normal']">
        <div class="icon-text">
          {{ active - 1 > index ? "✓" : index + 1 }}
        </div>
      </div>
      <div class="text">{{ item.name }}</div>
      <div :class="['line', stepList.length == index + 1 ? 'is-end' : '']"></div>

    </template>

  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const props = withDefaults(defineProps<{
  stepList?: Array<any>
}>(), {
  stepList: () => [
    {
      name: '分区生成',
      id: 1
    },
    {
      name: '吊顶设计',
      id: 2
    },
    {
      name: '设计完成',
      id: 3
    }
  ]
})
const active = ref(1)
const next = () => {
  active.value += 1
}
const prev = () => {
  active.value -= 1
}

defineExpose({
  next,
  prev,
  active
})

</script>
<style lang="scss" scoped>
.step-line {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  background-color: #F8F9FA;

}

.success {
  background-color: #2BC048;
  padding-right: 1px;
}

.normal {
  background-color: #C1C5D9;
}

.current {
  background-color: #326BFF;
  position: relative;

}

.is-end {
  display: none;
}

.current::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 3px;
  background-color: #327DFF;
  border-radius: 1px;
  position: absolute;
  bottom: -11px;
  left: 14px;
}

.line {
  height: 0;
  width: 107px;
  border-bottom: 1px dashed #666;
  margin: 0 5px;
}

.text {
  color: var(--, #333);
  font-family: "PingFang SC";
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  /* 180% */
}

.icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  text-align: center;
  line-height: 10px;
  margin-right: 4px;

  .icon-text {
    transform: scale(0.4);
    color: #fff;
    font-weight: 500;
  }
}
</style>